<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <link href="../css/bootstrap-3.3.6.min.css" rel="stylesheet">
    <script src="../js/jquery-2.2.0.js"></script>

    <style>
        body {
            font-family: "微软雅黑";
            font-size: 1.6em;
            background: #fffff2;
        }

        a {
            cursor: pointer;
        }
        button{
            display: block;
            margin-top: 10px;
        }
        .highLight{
            color: red;
            background: #D0FFB7;
            font-weight: 800
        }

        .animateBox{
            width:80%;
            height: 200px;
            color: #cf5d00;
            background: #e0d6ff;
            border: #718467 outset 3px;
            font-weight: 600 ;
            margin: 20px 0 auto 0;
            padding: 5px;
        }

        .animateBox2{
            width:120px;
            height: 120px;
            color: #cf5d00;
            background: #e0d6ff;
            border: #718467 outset 3px;
            /*border: #6b8dff outset 3px;*/
            font-weight: 600 ;
            margin: 20px 0 auto 0;
            position: relative;
            padding: 5px;
        }
        .toBig{
            /*position:absolute;*/
            float: left;
            top:0
        }
    </style>
</head>
<body>
<div class="container">
    <br>
    <br>
    <h1>动画</h1>
    <hr>
    <h3>内容显示/隐藏等常用动画</h3>
    <br>
    <div class="row" id="eventTest">
        <div class="col-md-8 col-md-offset-2">
            <button class="btn btn-primary" id="showHide">执行下面的动画</button>
            <div class="animateBox">show()和hide()方法演示</div><br>
            <button class="btn btn-primary" id="fadeInFadeOut">执行下面的动画</button>
            <div class="animateBox">fadeIn()和fadeOut()方法演示</div><br>
            <button class="btn btn-primary" id="slideUpSlideDown">执行下面的动画</button>
            <div class="animateBox">slideUp()slideDown()方法演示</div><br>
            <button class="btn btn-primary" id="customAnimate">执行下面的动画</button>
            <div class="animateBox2">自定义动画演示</div><br>
            <button class="btn btn-primary" id="callbackFunction">执行下面的动画</button>
            <div class="animateBox2">边框变蓝放入最后一步动画的回调函数里</div><br>
        </div>
    </div>
    <h3>动画停止和判断状态</h3>
    <br>
    <div class="row" id="stop0">
        <div class="col-md-8 col-md-offset-2" style="height: 150px">
            <h4>不停止动画的效果，鼠标多次滑过离开后动画排队继续进行</h4>
            <button class="btn btn-primary toBig" >滑过我</button>
            <button class="btn btn-primary toBig" >滑过我</button>
            <button class="btn btn-primary toBig" >滑过我</button>
            <button class="btn btn-primary toBig" >滑过我</button>
        </div>
    </div>
    <div class="row" id="stop">
        <div class="col-md-8 col-md-offset-2" style="height: 150px">
            <h4>stop()没有参数，则不会清空动画队列，鼠标移开后透明度降低的动画仍然继续</h4>
            <button class="btn btn-primary toBig" >滑过我</button>
            <button class="btn btn-primary toBig" >滑过我</button>
            <button class="btn btn-primary toBig" >滑过我</button>
            <button class="btn btn-primary toBig" >滑过我</button>
        </div>
    </div>
    <div class="row" id="stop2">
        <div class="col-md-8 col-md-offset-2 " style="height: 150px">
            <h4>加入参数后，鼠标滑过不必等到透明度降到最低即可执行鼠标移开动画</h4>
            <button class="btn btn-primary toBig" >滑过我</button>
            <button class="btn btn-primary toBig" >滑过我</button>
            <button class="btn btn-primary toBig" >滑过我</button>
            <button class="btn btn-primary toBig" >滑过我</button>
        </div>
    </div>
    <div class="row" id="stop3">
        <div class="col-md-8 col-md-offset-2 " style="height: 150px">
            <h4>鼠标移开时动画从鼠标移入的动画结束状态开始，看起来显得更快</h4>
            <button class="btn btn-primary toBig" >滑过我</button>
            <button class="btn btn-primary toBig" >滑过我</button>
            <button class="btn btn-primary toBig" >滑过我</button>
            <button class="btn btn-primary toBig" >滑过我</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8 col-md-offset-2 " style="height: 150px">
            <button class="btn btn-primary" id="isAnimated">使正在执行动画的按钮变色</button>
    </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <button class="btn btn-primary" id="delay">下面动画之间延时1s</button>
                <div class="animateBox2">延时动画的演示</div><br>
                <button class="btn btn-primary" id="slideToggle">执行下面动画</button>
                <div class="animateBox2">slideToggle演示</div><br>
                <button class="btn btn-primary" id="fadeToggle">执行下面动画</button>
                <div class="animateBox2">fadeToggle演示</div><br>
                <button class="btn btn-primary" id="fadeTo">执行下面动画</button>
                <div class="animateBox2">fadeTo演示</div><br>
            </div>
        </div>
    <div style="height: 500px"></div>
</div>
<script>
$(function () {
    var a1 = true;
    $("#showHide").click(function(){
        if(a1)
            $(this).next().hide("nomal");
        else
            $(this).next().show("fast");
        a1 = !a1;
    });

    var a2 = true;
    $("#fadeInFadeOut").click(function(){
        if(a2)
            $(this).next().fadeOut("nomal");
        else
            $(this).next().fadeIn("fast");
        a2 = !a2;
    })

    var a3 = true;
    $("#slideUpSlideDown").click(function(){
        if(a3)
            $(this).next().slideUp("slow");
        else
            $(this).next().slideDown("fast");
        a3 = !a3;
    })

//        自定义动画
    $("#customAnimate").click(function(){
//            $(this).next().animate({left:"300px"},500)
//            $(this).next().animate({left:"+=200px"},500)
//            $(this).next().animate({left:"-=100px"},500)
/*            $(this).next()//同时执行动画
                .animate({left:"300px",
                height:"240px",
                width:"240px"
        },500);*/
/*            $(this).next()//按顺序执行动画
                .animate({left:"300px"},500)
                .animate({height:"240px"},500)
                .animate({width:"240px"},500);*/
        $(this).next().css("opacity",0.3);//综合动画
        $(this).next()
                .animate({left:"300px",
                    width:"240px",
                    opacity:1},300)
                .animate({
                    top:"150px",
                    height:"240px"},600)
                .fadeOut(1000);
    })
    $("#callbackFunction").click(function(){
        $(this).next()
                .animate({left:"300px",
                    width:"240px",
                    opacity:1},300)
                .animate({
                    top:"150px",
                    height:"240px"},600,function(){
                    $(this).css("border","#6b8dff outset 5px")
                })
//                    .css("border","#6b8dff outset 5px");//写在这里的属性改变会在动画开始时已经执行
    })

//        停止动画
//        不停止动画的效果，鼠标多次滑过离开后动画排队继续进行
    $("#stop0 .toBig").hover(function(){
        $(this).animate({
            height:"100px",
            opacity:"0.5"
        },"fast").animate({
            background:"red",
            opacity:"0.1"
        })
    },function() {
        $(this).animate({
            height: "34px",
            opacity: "0.5"
        }, "fast").animate({
            background: "#337ab7",
            opacity: "1"
        });
    });
//        stop()没有参数，则不会清空动画队列，鼠标移开后透明度降低的动画仍然继续
    $("#stop .toBig").hover(function(){
        $(this).stop().animate({
            height:"100px",
            opacity:"0.5"
        },"fast").animate({
            background:"red",
            opacity:"0.1"
        })
    },function() {
        $(this).stop().animate({
            height: "34px",
            opacity: "0.5"
        }, "fast").animate({
            background: "#337ab7",
            opacity: "1"
        });
    });
    //加入参数后，鼠标滑过不必等到透明度降到最低即可执行鼠标移开动画
    $("#stop2 .toBig").hover(function(){
        $(this).stop(true).animate({
            height:"100px",
            opacity:"0.5"
        },"fast").animate({
            background:"red",
            opacity:"0.1"
        })
    },function(){
        $(this).stop(true).animate({
            height:"34px",
            opacity:"0.5"
        },"fast").animate({
            background:"#337ab7",
            opacity: "1"
        })
    });
    //鼠标移开时动画从鼠标移入的动画结束状态开始，看起来显得更快
    $("#stop3 .toBig").hover(function(){
        $(this).stop(true,true).animate({
            height:"100px",
            opacity:"0.5"
        },"fast").animate({
            background:"red",
            opacity:"0.1"
        })
    },function(){
        $(this).stop(true,true).animate({
            height:"34px",
            opacity:"0.5"
        },"fast").animate({
            background:"#337ab7",
            opacity: "1"
        })
    });

    $("#isAnimated").click(function(){
        if (!$(".toBig").is(":animated"))
            alert("现在没有元素在进行动画");
        $(".toBig:animated").css({//过滤所有正在执行动画的元素
            "font-size": 20,
            background: "red",
        });
    })
//        延时动画
    $("#delay").click(function(){
        $(this).next().animate({"left":"200px"})//注意！！！这里不能简写成("height","200px")
                .delay(1000)
                .animate({"height":"300px"})
                .delay(1000)
                .fadeOut("slow");
    })
    //其他动画
    $("#slideToggle").click(function(){
        $(this).next().slideToggle();
    })
    $("#fadeToggle").click(function(){
        $(this).next().fadeToggle();
    })
    $("#fadeTo").click(function(){
        $(this).next().fadeTo(800, 0.15);
    })

})

</script>
<!--<div style="background: rgba(164, 255, 169, 0.34)">.</div>-->
</body>
</html>